@font-face {
  font-family: 'Raleway';
  src: url('media/fonts/Raleway-Medium/raleway-medium-webfont.eot');
  src: url('media/fonts/Raleway-Medium/raleway-medium-webfont.eot?#iefix') format('embedded-opentype'),
       url('media/fonts/Raleway-Medium/raleway-medium-webfont.woff2') format('woff2'),
       url('media/fonts/Raleway-Medium/raleway-medium-webfont.woff') format('woff'),
       url('media/fonts/Raleway-Medium/raleway-medium-webfont.ttf') format('truetype'),
       url('media/fonts/Raleway-Medium/raleway-medium-webfont.svg#Raleway-Medium') format('svg');
  font-weight: normal;
  font-style: normal;
}

 .filtering-group{display:flex;flex-direction:column;flex-grow:1;flex-basis:0;min-width:132px;max-width:240px;margin-bottom:8px;border:1px solid lightgrey;border-radius:6px} .filtering-group[data-group-name]:before{align-self:flex-start;margin-top:-10px;margin-left:8px;background-color:white;color:lightgrey;font-size:15px} .filtering-group[data-group-name="color"]:before{content:'Catagory'} .filtering-group[data-group-name="icon"]:before{content:'Icon'} .filtering-group[data-group-name="size"]:before{content:'Size'} .filtering-group[data-group-name="border-width"]:before{content:'Border width'} .filtering-group .filtering-filter{display:flex;justify-content:space-between;gap:8px;padding:3px 12px;cursor:pointer;transition:all 0.2s ease-in-out} .filtering-group .filtering-filter:hover{background-color:#eeeeee} .filtering-group .filtering-filter.checked{background-color:#daf2d0;transform:scale(1.1)} .filtering-group .filtering-filter.disabled{color:#a4a4a4} .filtering-group .filtering-filter.disabled:hover{background-color:transparent} .filtering-group .filtering-filter[data-filter-type="all"]{border-top:1px solid lightgrey} .filtering-item{display:flex;align-items:center;justify-content:center;margin:6px;text-align:center;border:1px solid rgba(0,0,0,0.32);border-radius:7%;color:white;transition:all 0.5s ease-in-out;width:48px;height:48px} .filtering-item.filtering-item.filtered{width:0;margin-left:0;margin-right:0;border-width:0 !important;opacity:0} 
 /*
.filtering-item[data-filter-color="red"]{background-color:#db4437} 
.filtering-item[data-filter-color="green"]{background-color:#0f9d58} 
.filtering-item[data-filter-color="blue"]{background-color:#4285f4} 
.filtering-item[data-filter-color="red,blue"]{background-color:#AB47BC} 
*/

.filtering-item[data-filter-size="6ft"]{width:190px;height:190px} 
.filtering-item[data-filter-size="8ft"]{width:190px;height:190px} 
.filtering-item[data-filter-size="10ft"]{width:190px;height:190px} 
.filtering-item[data-filter-size="15ft"]{width:190px;height:190px} 
.filtering-item[data-filter-size="20ft"]{width:190px;height:190px} 
.filtering-item[data-filter-size="2m"]{width:190px;height:190px} 
.filtering-item[data-filter-size="3m"]{width:190px;height:190px} 
.filtering-item[data-filter-size="4m"]{width:190px;height:190px} 
.filtering-item[data-filter-size="other"]{width:190px;height:190px}
.demo .filtering-item{transition-duration:0.15s}
.guide{margin-bottom:15px;background:#eef;padding:8px 12px;overflow-x:auto}
.guide *{--color-alpha: 0.4}.guide .element{color:rgba(0, 0, 128, var(--color-alpha))}
.guide .attribute{color:rgba(0, 128, 128, var(--color-alpha))}.guide .attribute-value{color:rgba(221, 17, 68, var(--color-alpha))}.guide .text{color:rgba(17, 17, 17, var(--color-alpha))}.guide .comment{color:rgba(153, 153, 136, var(--color-alpha));font-style:italic}.guide b{color:inherit}.guide b,.guide .\!{--color-alpha: 1}.guide b *,.guide .\! *{--color-alpha: 1}